In the Blocks SDK, UI components can be styled via a set of supported style props.
These style props (e.g. width, margin, backgroundColor) take a subset of
supported CSS properties and expose them as explicit React component props.
Here is an example that uses the Box layout primitive:
<Box
display="flex"
alignItems="center"
justifyContent="center"
width="200px"
height="200px"
>
Hello world
</Box>
This is equivalent to the following:
<divstyle={{
display:'flex',
alignItems:'center',
justifyContent:'center',
width:'200px',
height:'200px',
}}>
Hello world
</div>
Style props also provide access to Airtable's design tokens, including our color
palette, typographic scale, and spacing scale. This allows developers to quickly
build UIs that adhere to the Airtable design system. As an example, numbers passed
to the margin or padding props are converted to our spacing scale, based on
powers of two.
<Boxmargin={0}/>// margin: 0;
<Boxmargin={1}/>// margin: 4px;
<Boxmargin={2}/>// margin: 8px;
<Boxmargin={3}/>// margin: 16px;
// Negative margins are also supported
<Boxmargin={-1}/>// margin: -4px;
<Boxmargin={-2}/>// margin: -8px;
<Boxmargin={-3}/>// margin: -16px;
To override this behavior and use a specific pixel value (or other units, like percentages
or ems/rems), you may pass a string like 200px. However, this is generally discouraged,
as these values don't adhere to the same grid/vertical rhythm as the rest of our components.
As another example, style props like backgroundColor and textColor accept
color names that ensure visual consistency with the Airtable styleguide.
Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.
<BoxbackgroundColor="blue"textColor="white"/>
Each component in our UI library exposes a particular subset of style props, documented as
style prop interfaces. For more information, refer to the API reference for the specific
component that you're trying to use.
Sets the alignment of a flex container's lines when there is extra space in the cross-axis. This property has no effect on a single-line flex container.
Adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
Defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.
Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Sets the margin area on the left and right of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Sets the margin area on the top and bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.